<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org" xmlns:white-space="http://www.w3.org/1999/xhtml" xmlns:normal>
<head>
    <title>SpringBoot模版渲染</title>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
    <!-- meta使用viewport以确保页面可自由缩放 -->
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- 引入 jQuery Mobile 样式 -->
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">

    <!-- 引入 jQuery 库 -->
    <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>

    <!-- 引入 jQuery Mobile 库 -->
    <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
    <style>
        .flag{
            position:absolute;
            top:25%;
            left:50%;
            transform:translate(-50%,-50%);
        }
    </style>
</head>
<body>
    <div data-role="page">
        <div data-role="header" data-position="fixed" data-theme="c">
            <!-- <a href="fangwen.html" class="ui-btn-left">访问</a> -->
            <h1>自我介绍</h1>
            <!--<a href="fangwen.html" class="ui-btn-right" onclick="exit()" data-ajax="false">退出</a>-->
        </div>

        <div data-role="content">
            <img th:src="'http://localhost:8080/head/'+${user.head} " style="width: 100px;border-radius:50px;" class="flag">
            <div data-role="collapsible-set" style="position: absolute; top: 40%;width: 100%;">
                <div data-role="collapsible"  data-collapsed-icon="arrow-d" data-expanded-icon="arrow-u" data-collapsed="false"
                     data-iconpos="right" >
                    <h3>个人信息</h3>
                    <ul data-role="listview" data-inset="false">
                        <li>
                            名字<span id="name" style="margin-left: 10%;" th:text="${user.name}"></span>
                        </li>
                        <li>性别<span id="sex" style="margin-left: 10%;"  th:text="${user.sex}"></span></li>
                        <li>年龄<span id="age" style="margin-left: 10%;"  th:text="${user.age}"></span></li>
                        <li>电话<span id="phone" style="margin-left: 10%;" th:text="${user.phone}"></span></li>
                    </ul>
                </div>
                <div data-role="collapsible" data-collapsed-icon="arrow-d" data-expanded-icon="arrow-u" data-collapsed="true"
                     data-iconpos="right">
                    <h3>自我介绍</h3>
                    <ul data-role="listview" data-inset="false">
                        <li><span id="zwjs"  th:text="${user.zwjs}"/></li>
                    </ul>
                </div>
                <div data-role="collapsible" data-collapsed-icon="arrow-d" data-expanded-icon="arrow-u" data-collapsed="true"
                     data-iconpos="right" >
                    <h3>成长轨迹</h3>
                    <ul data-role="listview" data-inset="false">
                        <li><span id="czgj"  th:text="${user.czgj}" /></li>
                    </ul>
                </div>
            </div>
        </div>

        <div data-role="footer" data-position="fixed" data-fullscreen="true">
            <div data-role="navbar">
                <ul>
                    <li><a href="my.html" data-icon="star" style="color: #22AADD;" data-ajax="false">介绍</a></li>
                    <li><a href="tuijian.html" data-icon="grid" data-ajax="false">推荐</a></li>
                    <li><a href="show.html" data-icon="home" data-ajax="false">展示</a></li>
                    <li><a href="pinglun.html" data-icon="home" data-ajax="false">评论</a></li>
                </ul>
            </div>
        </div>
    </div>
</body>
</html>